<!-- 带导航栏的列表视图 -->
<!-- 包含导航栏、底部栏、文章详情展示功能 -->
<template>
	<div class="content">
		<navbar @selectNav="onSelectNav" />
		<div class="page-banner bg-1">
			<div class="d-table">
				<div class="page-title vertical-middle text-center"></div>
			</div>
		</div>
		<div class="breadcrumb-area mt-25 mb-60 container minHeight">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-3">
						<notice-com @clickNotice="onClickNotice"></notice-com>
					</div>
					<div class="col-lg-9 content-height">
						<div class="border-b">
							<div class="nav-left">
								<span>{{ $route.meta.title }}</span>
								<el-button v-if="!!contentData == true" type="text" @click="onBackList">返回列表</el-button>
							</div>
							<breadcrumb></breadcrumb>
						</div>
						<!--single-tab-->
						<div class="row" style="padding: 0 10px">
							<div class="col-lg-12">
								<div class="list-view" v-if="!!contentData == false" v-loading="loadingDetail">
									<div class="course-text mt-10" v-for="(item, index) in trends" :key="index" @click="enterDetail(item)">
										<div class="info">
											<div class="table-cell pr-10">
												<h3>
													<a>{{ item.colTitle }}</a>
												</h3>
											</div>
											<p>{{ item.deptFullName }}</p>
										</div>
										<div class="course-meta" style="border: none">
											<a><i class="fa fa-calendar"></i>{{ item.createTime }}</a>
											<a><i class="fa fa-user"></i>{{ item.createBy }}</a>
										</div>
									</div>
								</div>
								<transition name="fade-transform" mode="out-in">
									<div v-if="!!contentData == true" style="padding: 0 10px">
										<form>
											<div class="art-tit">
												<h3 class="text-center">{{ contentData.noticeTitle }}</h3>
											</div>

											<div class="art-info">
												<span>作者: {{ contentData.createBy }}</span> <span>发布：{{ contentData.createTime }} </span>
											</div>
											<div v-html="contentData.colContent" class="art-body"></div>
                      <el-divider v-if="contentData.bizAttachList!=null && contentData.bizAttachList.length>0" content-position="left">附件下载</el-divider>
                      <div class="file" v-for="item in contentData.bizAttachList" :key="item.cBizId" @click="checkFile(item)">
                        {{ item.cFileName }}
                      </div>
										</form>
									</div>
								</transition>
							</div>
						</div>

						<div class="row align-items-center mt-30 justify-content-center justify-content-sm-end" v-if="!!contentData == false">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="pagination.pageNum"
								:page-sizes="pagination.pageSizes"
								:page-size="pagination.pageSize"
								:layout="screenWidth < 700 ? 'total, prev, pager, next' : pagination.layout"
								:total="pagination.total"
							>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footers />
	</div>
</template>

<script>
import { Navbar, Footers } from '@/layout/components'
import noticeCom from '@/components/notice'
import breadcrumb from '@/components/breadcrumb'
export default {
	components: {
		breadcrumb,
		Navbar,
		Footers,
		noticeCom,
	},
	data() {
		return {
			trends: [],
			query: {},
			pagination: {
				pageSize: 10,
				pageSizes: [10, 20, 30],
				layout: 'total, sizes, prev, pager, next, jumper',
				pageNum: 1,
			},
			contentData: null,
			loadingDetail: false,
		}
	},
	computed: {
		screenWidth() {
			const width = this.$store.getters.screenWidth
			return width
		},
		noticeList() {
			return this.$store.getters.noticeList
		},
	},
	created() {
		// type = detail 加载详情， type = list 加载列表
		this.query = this.$route.query
		if (this.query.type == 'detail') {
			this.getDetail({
				noticeId: this.query.noticeId,
			})
		} else {
			this.getJobInfoList()
		}
	},
	methods: {
		enterDetail(item) {
			this.getDetail(item)
		},
		handleSizeChange(pageSize) {
			this.pagination.pageSize = pageSize
			this.getJobInfoList()
		},
		handleCurrentChange(pageNum) {
			this.pagination.pageNum = pageNum
			this.getJobInfoList()
		},
		getDetail(item) {
			this.loadingDetail = true
			this.$api.notice
				.getJobInfoDetail(item.colId)
				.then((res) => {
					const data = res.data
					if (data.code == 200) {
						this.contentData = data.data
					}
				})
				.catch(() => {
					this.$message({
						showClose: true,
						type: 'warning',
						message: '获取招聘详情失败，请重试',
					})
				})
				.finally(() => {
					this.loadingDetail = false
				})
		},
		getJobInfoList() {
			this.loadingDetail = true
			this.$api.notice
				.getJobInfoList({
					pageSize: this.pagination.pageSize,
					pageNum: this.pagination.pageNum,
				})
				.then((res) => {
					const data = res.data
					if (data.code == 200) {
						this.trends = data.rows
						this.pagination.total = data.total
					}
				})
				.catch((error) => {
					console.log('getJobInfoList', error)
				})
				.finally(() => {
					this.loadingDetail = false
				})
		},
		// 返回列表
		onBackList() {
			this.contentData = null
			if (!this.trends.length) {
				this.getArticleList()
			}
		},
		onSelectNav(item) {
			if (item.colPath) {
				this.$router.push({
					path: item.colPath,
					query: {
						title: item.colTitle,
						colId: item.colId,
					},
				})
			}
		},
		// 点击了通知
		onClickNotice(notice) {
			this.getDetail(notice)
		},
		checkFile(item) {
			window.open(item.cFileUrl)
		},
	},
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.minHeight {
	flex: 1;
}

.page-banner {
	flex-shrink: 0;
}

.nav-left {
	display: flex;
	align-items: center;

	.el-button {
		margin-left: 10px;
	}
}

.bg-1 {
	background: rgba(0, 0, 0, 0) url('~@/assets/images/bg/nyban.jpg') repeat scroll center center / cover;
	height: 400px;
}

.list-none {
	text-align: right;
}

.border-b {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	/*border-bottom: 2px solid #529e2f;*/
  border-bottom: 2px solid #2c8eff;

	span {
		font-size: 24px;
		/*border-left: 8px solid #529e2f;*/
    border-left: 8px solid #2c8eff;
		padding-left: 10px;
	}
}

.info {
	display: flex;
	flex-direction: column;
}

.course-meta a {
	// padding: 5px 0;
	// border-right: 0;
}

.course-text {
	cursor: pointer;
}

.art-tit {
	margin-top: 20px;
}

.art-info {
	color: #333;
	font-size: 16px;
	font-family: '微软雅黑';
	padding: 0;
	box-sizing: border-box;
	outline: none;
	background: #fff;
	text-align: center;
	margin: 40px 0;
}

// 附件
.file {
	color: #409eff;
	font-size: 18px;
	text-decoration: underline;
	cursor: pointer;
}
</style>
